<template>
	<!-- 弹窗防穿透 -->
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<!-- 主体 -->
	<view class="bodys">
		<!-- 头部 -->
		<view class="top">
			<view class="back" @click="toBack">
				<i class="iconfont icon-fanhui fanhui"></i>
			</view>
			<text class="navbar">维修记录</text>
		</view>
		<!-- 核销码 -->
		<view class="card" v-if="info.del!='已取消'">
			<view :class="{ma:true,noma:info.del=='已完成'}">
				<view class="hexiao">核销码：</view>
				<view class="code">{{code}}</view>
			</view>
			<!-- 二维码 -->
			<view class="two" v-if="info.del=='进行中'">
				<image class="photo" :src="ma"></image>
			</view>
			<view class="two" v-else>
				<image class="photo" :src="noma"></image>
			</view>
		</view>
		<!-- 维修信息 -->
		<view class="card">
			<view class="title">维修信息</view>
			<view class="line"></view>
			<view class="neirong">
				<view class="row">
					<view class="shuxing">维修单号：</view>
					<view class="info">{{info.id}}</view>
				</view>
				<view class="row">
					<view class="shuxing">维修状态：</view>
					<view class="info">{{info.del}}</view>
				</view>
				<view class="row">
					<view class="shuxing">车主姓名：</view>
					<view class="info">{{info.name}}</view>
				</view>
				<view class="row">
					<view class="shuxing">联系方式：</view>
					<view class="info">{{info.tel}}</view>
				</view>
				<view class="row">
					<view class="shuxing">维修方式：</view>
					<view class="info">{{info.type}}</view>
				</view>
				<view class="row">
					<view class="shuxing">取车位置：</view>
					<view class="info">{{info.address}}</view>
				</view>
				<view class="row">
					<view class="shuxing">预约日期：</view>
					<view class="info">{{info.yuTime}}</view>
				</view>
				<view class="row">
					<view class="shuxing">提交日期：</view>
					<view class="info">{{info.getTime}}</view>
				</view>
			</view>
		</view>
		<!-- 车辆信息 -->
		<view class="card">
			<view class="title">车辆信息</view>
			<view class="line"></view>
			<view class="neirong">
				<view class="row">
					<view class="shuxing">车辆类型：</view>
					<view class="info">{{car.type}}</view>
				</view>
				<view class="row">
					<view class="shuxing">车牌号：</view>
					<view class="info">{{car.code}}</view>
				</view>
				<view class="row2">
					<view class="shuxing">整车照片：</view>
					<view class="img">
						<image :src="car.allPhoto"></image>
					</view>
				</view>
				<view class="row2">
					<view class="shuxing">维修部位照片：</view>
					<view class="img">
						<image v-for="item,index in car.photos" :key="index" :src="item"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="foot" v-if="info.del=='进行中'">
			<view class="button">
				<button @click="quxiao()" plain="true">取消订单</button>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="popup" :mask-click="false" class="tanchuang">
			<view class="kuang">
				<view class="text">确定取消预约么？</view>
				<view class="buttons">
					<button class="no" plain="true" @click="no()">取消</button>
					<button class="yes" plain="true" @click="yes()">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//弹出框状态
				show: false,
				//核销码
				code: "WE343235V",
				//二维码路径(进行中)
				ma: "/static/车联网服务-08我的-03我的维修-03维修记录_slices/ma23.png",
				//灰色二维码(已完成)
				noma: "/static/车联网服务-08我的-03我的维修-03维修记录_slices/noma23.png",
				//维修信息
				info: {
					//维修单号
					id: 3535252,
					//维修状态
					del: "进行中",
					//车主姓名
					name: "张",
					//联系方式
					tel: "1993829282",
					//维修方式
					type: "上门取车",
					//取车位置
					address: "山阳区32号",
					//预约日期
					yuTime: "2022/11/10 11:00",
					//提交日期
					getTime: "2022/11/08 12:34"
				},
				//车辆信息
				car: {
					//车辆类型
					type: "大客车",
					//车牌号
					code: "豫J45323",
					//整车照片
					allPhoto: "../../../static/车联网服务-08我的-03我的维修-03维修记录_slices/car23.png",
					//维修部位图片
					photos: ["../../../static/车联网服务-08我的-03我的维修-03维修记录_slices/car23.png",
						"../../../static/车联网服务-08我的-03我的维修-03维修记录_slices/car23.png",
						"../../../static/车联网服务-08我的-03我的维修-03维修记录_slices/car23.png"
					]
				}
			};
		},
		methods: {
			//获取信息
			getInfo(){
				// uni.request({
				// 	url:'',
				// })
			},
			//左上角返回
			toBack() {
				uni.navigateBack();
			},
			//点击取消订单按钮
			quxiao() {
				this.show = true;
				this.$refs.popup.open();
			},
			//点击取消按钮
			no() {
				this.show = false;
				this.$refs.popup.close();
			},
			//点击确定按钮
			yes() {
				this.show = false;
				this.$refs.popup.close();
				//改变状态接口
				// uni.request({
				// 	url:'',
				// },
				// success: (res) => {
				// 	getInfo();
				// })
			}
		},
		//页面加载
		onLoad() {
			getInfo();
		}
	}
</script>

<style lang="scss">
	//主体
	.bodys {
		width: 100%;
		position: relative;
		padding-bottom: 100rpx;
		background-image: linear-gradient(#3789ff,#0e67e8);
		background-size: 100% 375rpx;
		background-repeat: no-repeat;

		//顶部导航栏
		.top {
			width: 100%;
			color: white;
			position: relative;
			text-align: center;
			padding-top: 50rpx;
			margin-bottom: 40rpx;

			//返回按钮位置
			.back {
				position: absolute;
				top: 45rpx;
				left: 5rpx;

				//返回按钮
				.fanhui {
					font-size: 50rpx;
				}
			}

			//标题名字
			.navbar {
				font-size: 32rpx;
			}
		}

		//卡片（每个白色框）
		.card {
			background-color: white;
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;

			//核销码
			.ma {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 10rpx;

				//三个字样式
				.hexiao {
					font-size: 30rpx;
					font-weight: 500;
				}

				//码的样式
				.code {
					font-size: 24rpx;
					display: flex;
					align-items: end;
				}
			}

			//已完成样式
			.noma {
				color: #b2b2b2;
			}

			//二维码
			.two {
				margin: 20rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;

				//图片
				.photo {
					width: 150rpx;
					height: 150rpx;
				}
			}

			//卡片标题
			.title {
				font-size: 32rpx;
			}

			//卡片分割线
			.line {
				background-color: #f7f7f7;
				height: 6rpx;
				width: 100%;
				border-radius: 3rpx;
				margin-top: 20rpx;
			}

			//卡片主题内容
			.neirong {

				//一行信息(无图)
				.row {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					//属性
					.shuxing {
						font-size: 24rpx;
					}

					//信息
					.info {
						font-size: 24rpx;
						color: #c1c1c1;
					}
				}

				//一行信息(图片)
				.row2 {
					margin-top: 20rpx;

					//属性
					.shuxing {
						font-size: 24rpx;
					}

					//图片盒子
					.img {
						margin-top: 20rpx;

						//图片
						image {
							height: 150rpx;
							width: 150rpx;
							border-radius: 10rpx;
							margin-right: 30rpx;
						}
					}
				}
			}
		}

		//底部
		.foot {
			position: fixed;
			width: 100%;
			height: 100rpx;
			background-color: white;
			bottom: 0;
			left: 0;
			border-top: 1px solid #f5f5f5;

			//按钮外盒子
			.button {
				width: 100%;
				height: 100%;
				position: relative;

				//按钮
				button {
					width: 180rpx;
					height: 60rpx;
					background: linear-gradient(to right,#3789ff,#0662e6);
					border-radius: 30rpx;
					color: white;
					font-size: 24rpx;
					line-height: 60rpx;
					position: absolute;
					top: 20rpx;
					right: 35rpx;
				}
			}
		}

		//弹窗
		.tanchuang {

			//弹窗盒子
			.kuang {
				background-color: white;
				border-radius: 20rpx;
				width: 610rpx;
				height: 150rpx;
				padding: 50rpx;

				//弹窗文字
				.text {
					font-size: 26rpx;
					text-align: center;
				}

				//弹窗按钮组
				.buttons {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 50rpx;

					//取消按钮
					.no {
						width: 150rpx;
						height: 60rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						border: 0;
						border-radius: 30rpx;
						background-color: #f2f2f2;
					}

					//确定按钮
					.yes {
						width: 150rpx;
						height: 60rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						border: 0;
						border-radius: 30rpx;
						background-color: #2377f3;
						color: white;
					}
				}
			}
		}
	}

	//按钮去边框
	button[plain] {
		border: 0;
	}

	//iconfont图标样式
	@font-face {
		font-family: "iconfont";
		/* Project id 4789291 */
		src: url('//at.alicdn.com/t/c/font_4789291_ek13wtn59li.woff2?t=1734698343570') format('woff2'),
			url('//at.alicdn.com/t/c/font_4789291_ek13wtn59li.woff?t=1734698343570') format('woff'),
			url('//at.alicdn.com/t/c/font_4789291_ek13wtn59li.ttf?t=1734698343570') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-fanhui:before {
		content: "\e601";
	}
</style>